<template>
  <view class="demos-container">
    <view class="avatar-section" @click="chooseAvatarDirectly">
      <view class="avatar-wrapper">
        <view class="loading" v-if="isChoosing">加载中...</view>
        <image :src="currentAvatarUrl" mode="aspectFill" class="avatar-img"></image>
        <view class="avatar-edit-icon" v-if="!isChoosing">
          <uni-icons type="camera" size="36rpx" color="#fff"></uni-icons>
        </view>
      </view>
      <text class="avatar-hint">点击图片选择头像</text>
    </view>
    <photochoose1></photochoose1>
    <weather></weather>
    <photolook></photolook>
  </view>
</template>

<script>
import photochoose1 from './photochoose1/photochoose1.vue'
import weather from './weather/weather.vue'
import photolook from './photolook/photolook.vue'

export default {
  components: {
    photochoose1,
    weather,
    photolook
  },
  data() {
    return {
      currentAvatarUrl: '',
      isChoosing: false 
    }
  },
  onShow() {
    this.loadPersistentAvatar();
  },
  methods: {
    chooseAvatarDirectly() {
      this.isChoosing = true;
      uni.chooseImage({
        count: 1, 
        sizeType: ['original', 'compressed'], 
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempPath = res.tempFilePaths[0];
          this.saveAvatarToLocal(tempPath);
        },
        fail: (err) => {
          console.error('选择头像失败：', err);
          if (err.errMsg.includes('auth deny')) {
            uni.showToast({ title: '请开启相册/相机权限', icon: 'none' });
            uni.openSetting({
              success: (settingRes) => {
                if (settingRes.authSetting['scope.album'] || settingRes.authSetting['scope.camera']) {
                  this.chooseAvatarDirectly(); 
                }
              }
            });
          } else {
            uni.showToast({ title: '选择失败，请重试', icon: 'none' });
          }
        },
        complete: () => {
          this.isChoosing = false; 
        }
      });
    },
    saveAvatarToLocal(tempPath) {
      const fs = uni.getFileSystemManager();
      const avatarPath = `${uni.env.USER_DATA_PATH}/user_avatar.jpg`;

      fs.copyFile({
        srcPath: tempPath, 
        destPath: avatarPath, 
        success: () => {
          this.currentAvatarUrl = avatarPath; 
          uni.showToast({ title: '头像设置成功' });
        },
        fail: (err) => {
          console.error('保存头像失败：', err);
          uni.showToast({ title: '保存失败，请重试', icon: 'none' });
        }
      });
    },
    loadPersistentAvatar() {
      const fs = uni.getFileSystemManager();
      const avatarPath = `${uni.env.USER_DATA_PATH}/user_avatar.jpg`;

      try {
        fs.accessSync(avatarPath);
        this.currentAvatarUrl = avatarPath;
      } catch (e) {
      }
    }
  }
}
</script>

<style>
.demos-container {
  padding: 20rpx;
}

.demos-container > view {
  margin-bottom: 40rpx;
}

.avatar-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.avatar-wrapper {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  overflow: hidden; 
  margin: 0 auto;
  border: 4rpx solid #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;
  background-color: #f0f0f0; 
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-edit-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #333;
  z-index: 10;
}

.avatar-hint {
  margin-top: 15rpx;
  font-size: 26rpx;
  color: #999;
}
</style>